extends layout
append scripts
    script.
        // 鼠标事件     键盘事件    表单事件    文档/窗口事件
        // click        keypress    submit      load
        // dblclick     keydown     change      resize
        // mouseenter   keyup       focus       scroll
        // mouseleave               blur        unload
        // mousemove                            ready
        // hover
        // *** 这些事件既可以写进 on(), trigger(), 也可以单独写 ***
        // 无参是触发, 有参是定义触发函数
        // 各种事件
        $(function () { console.log('init A...'); });  // 见到这种形式的一定是 ready() 的简写
        $('#test-link').on('click', function () { alert('Hello!'); });  // on 方法用来绑定一个事件, 我们需要传入事件名称和对应的处理函数
        $('#test-link').click(function () { alert('Hello!'); });        // 简化写法, 和上面等价
        $('#test-link').off('click');                                   // 解除所有绑定, 也可以在第二个参数指定函数名
        // mousemove() 添加鼠标监听时间, 并获得鼠标坐标
        $('#testMouseMoveDiv').mousemove(function (e) { $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY); });
        // 事件触发条件
        var input = $('#test-input').change(function () { console.log('changed...'); });
        // 用户在文本框中输入时, 会触发 change 事件, 用 JS 代码去改动文本框的值, 不会触发 change
        input.val('change it!');  // 无法触发 change 事件
        input.change();  // 直接调用无参数的 change() 触发
        // input.change() 相当于 input.trigger('change'), 它是 trigger() 方法的简写
        // 浏览器安全限制
        window.open('/');  // 无法弹出新窗口, 将被浏览器屏蔽(地址栏会提示), 这些 "敏感代码" 只能由用户操作来触发
        $('#test-link').click(function(){window.open('/')})  // 由于 popupTestWindow() 在 click 事件处理函数内执行, 这是浏览器允许的
        $('#test-link_1').click(function(){setTimeout(function(){window.open('/')}, 3000)}); // 隔 1s 就没事, 3s 的延迟会被拦截
block content
    p #[a#test-link(href="#0") 点我试试]
    p #[a#test-link_1(href="#0") 点我试试_1]
    | mousemove: #[span#testMouseMoveSpan]
    p #[#testMouseMoveDiv(style="display: block; width: 300px; height: 120px; border: 1px solid #ccc;") 在此区域移动鼠标试试]
    input#test-input(type="textarea")
